<!-- <div flex flex-col items-center justify-center h-auto p10 my5 op30 b="1 op30" hover="op100">
	<slot />
</div> -->
<script>
	import { fade, fly } from 'svelte/transition';
	export let items;
</script>

{#each items as item, index}
	<div
		in:fly={{ x: index % 2 ? 200 : -300, duration: 400, delay: 400 }}
		out:fly={{ x: index % 2 ? -200 : 300, duration: 400 }}
	>
		<div class="card" flex flex-col items-center justify-center  h-auto  my-5 py-5 op50 hover="op90">
			<!-- hover="bg-black op90" -->
			<svelte:component this={item} />
		</div>
	</div>
{/each}
